<template>
    <el-dialog title="现结查看" :visible.sync="dialogForm" width="1100px">
        <el-form :inline="true" ref="form" :model="form" class="detail-form" label-width="120px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口：">
                        {{ form.portName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名：">
                        {{ form.shipName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次：">
                        {{ form.voyage }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="收费金额：">
                        {{ form.accountFee }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="结算时间：">
                        {{ form.accountTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="结算单位：">
                        {{ form.accountUnit }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="结算人：">
                        {{ form.accountUser }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="details" border stripe max-height="500" class="mt-10">
            <el-table-column label="序号" min-width="55">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="containerId" label="箱号"  min-width="110"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="110"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="110"></el-table-column>
            <el-table-column prop="ef" label="空重"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.ef | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="110"></el-table-column>
            <el-table-column prop="cargoCount" label="件数"  min-width="110"></el-table-column>
            <el-table-column prop="isSendCustoms" label="海关放行"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.isSendCustoms | _filterOneOrZero }}
                </template>
            </el-table-column>
            <el-table-column prop="shipAgentName" label="船代"  min-width="110"></el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import { getBalanceCashId } from "@/api/balance/balance";

    export default {
        name: "cashForm",
        data() {
            return {
                form: {},
                details: [],
                dialogForm: false
            }
        },
        methods: {
            loadData(id) {
                getBalanceCashId(id).then(res => {
                    this.details = res.data.details
                    this.form = res.data
                })
            }
        }
    }
</script>

<style scoped>

</style>
